<template>
  <div class="game-container">
    <div v-if="!gameStarted" class="start-screen">
      <button @click="startGame">开始游戏</button>
    </div>
    
    <div v-if="gameStarted" class="game-screen">
      <div class="story-text">
        <span
          v-for="(char, index) in storyChars"
          :key="index"
          :class="getCharClass(index)"
        >
          {{ char }}
        </span>
      </div>

      <keyboard-layout :currentKey='currentKey'/>
    </div>
  </div>
</template>

<script>
import { getRandomStory } from "@/data/disney-stories.js";
import KeyboardLayout from "@/components/keyboard-layout.vue";

export default {
  components: {
    KeyboardLayout,
  },
  data() {
    return {
      gameStarted: false,
      story: '',
      currentIndex: 0,
      startTime: null,
      endTime: null
    };
  },
  computed: {
    currentKey() {
      const {
        storyChars,
        currentIndex
      } = this
      return storyChars[currentIndex]
    },
    storyChars() {
      const {story=''} = this;
      return story.content.split('');
    },
    
  },
  methods: {
    startGame() {
      this.story = getRandomStory();
      this.gameStarted = true;
      this.currentIndex = 0;
      this.startTime = Date.now();
      window.addEventListener('keydown', this.handleKeyPress);
    },
    handleKeyPress(event) {
      const {
        currentIndex,
        currentKey
      } = this
      if (currentIndex >= this.storyChars.length) return;
      
      const expectedChar = currentKey.toLowerCase();
      const pressedChar = event.key.toLowerCase();
      
      if (pressedChar === expectedChar) {
        this.currentIndex++;
        if (this.currentIndex === this.storyChars.length) {
          this.endGame();
        }
      } else {
        // 播放错误音效
        const errorSound = new Audio('/sounds/error.mp3');
        errorSound.play();
      }
    },
    getCharClass(index) {
      if (index < this.currentIndex) {
        return 'typed';
      } else if (index === this.currentIndex) {
        return 'current';
      }
      return '';
    },
    endGame() {
      this.endTime = Date.now();
      window.removeEventListener('keydown', this.handleKeyPress);
      const timeTaken = ((this.endTime - this.startTime) / 1000).toFixed(2);
      alert(`恭喜完成！用时：${timeTaken}秒`);
    }
  }
};
</script>

<style scoped>
.game-container {
  margin: 0 auto;
  padding: 20px;
}

.start-screen {
  text-align: center;
  margin-top: 100px;
}

.start-screen button {
  padding: 15px 30px;
  font-size: 1.2rem;
  cursor: pointer;
}

.story-text {
  font-size: 1.2rem;
  line-height: 2;
  white-space: pre-wrap;
  font-family: monospace;
  border: 1px solid gray;
  border-radius: 10px;
  padding: 10px;
  background: rgb(240, 240, 240);
}

.game-screen {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.typed {
  color: #10d03a;
  font-weight: bold;
}

.current {
  background-color: #ffeb3b;
  color: #000;
  font-weight: bold;
}
</style>
